<script>

  import Home from "./pages/Home.svelte"
  import Header from './components/Header.svelte'
  import Login from './pages/Login.svelte'
  import Register from './pages/Register.svelte'
  import Logout from './pages/Logout.svelte'
  import Router, {link} from 'svelte-spa-router';
  // const sass = require("node-sass");
  // import LoginRegister from "./LoginRegister.svelte"
  // let name = "你好";
  // let src = "../public/vite.svg";
  // const routes = {
  //   '/':
  // }
  // let password = "";
//   const routes = {
//   '/':Home,
//   '/loginRegister':LoginRegister,


const routes = {
		'/': Home,
		'/login': Login,
    '/register': Register,
    '/logout':Logout
	};
// }
</script>
<!-- <Header /> -->

<!-- <Home /> -->

<header class="nav">
	<div class="container">
    <h1 class="logo"><a href="/" use:link>LoginDemo</a></h1>
    <ul>
      <li><a href="/" use:link class="current">Home</a></li>
      <li><a href="/login" use:link>Login</a></li>
      <li><a href="/register" use:link>Register</a></li>
      <li><a href="/logout" use:link>Logout</a></li>
    </ul>
	</div>
  
</header>
<!-- <style lang="scss">
  :root {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    height: 100%;
  }
  :global(body) {
    /* this will apply to <body> */
    margin: 0;
    height: 100%;
    background-color: #fbfbfb;
  } -->
<style>
  * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #222;
  padding-bottom: 0px;
  margin: 0px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: fixed;

}

.nav {
  position: fixed;
  background-color: #222;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.3s ease-in-out;
}

.nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  transition: all 0.3s ease-in-out;
}

.nav ul {
  display: flex;
  list-style-type: none;
  align-items: center;
  justify-content: center;
}

.nav a {
  color: #fff;
  text-decoration: none;
  padding: 7px 15px;
  transition: all 0.3s ease-in-out;
}

.nav.active {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav.active a {
  color: #000;
}

.nav.active .container {
  padding: 10px 0;
}

.nav a.current,
.nav a:hover {
  color: #c0392b;
  font-weight: bold;
}

.hero {
  background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  height: 100vh;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  margin-bottom: 0px;
  margin-right:0px;
  z-index: -2;
  /* background-size:100% 100%;
background-attachment:fixed; */
}

.hero::before {
  content: '';
  position: absolute;
  /* background-size:100% 100%;
background-attachment:fixed; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.hero h1 {
  font-size: 46px;
  margin: -20px 0 20px;
}

.hero p {
  font-size: 20px;
  letter-spacing: 1px;
}

.content h2,
.content h3 {
  font-size: 150%;
  margin: 20px 0;
}

.content p {
  color: #555;
  line-height: 30px;
  letter-spacing: 1.2px;
}

</style>
<Router {routes}/>
<!-- <div>
  hello {
    name.replace(/(\W)(\W)/, "$1_$2")
  }
  <img src={ src } alt="" />
</div> -->



<!-- <script>
  // let name = ""; // 响应式数据
  // let yes = false;
  // let books = [];
  // let selected = 1;
//   const password = document.getElementById('password')
// const background = document.getElementById('background')
let password = "";
password.addEventListener('input', (e) => {
  const input = e.target.value
  const length = input.length
  const blurValue = 20 - length * 2
  background.style.filter = `blur(${blurValue}px)`
})

</script>

<input type="text" bind:value={name}>
<h1>Hello, { name }</h1>

<br />
<input type="checkbox" bind:checked={yes} />
{yes}
<br />

<input type="text">

<br />
Multify Option
<br />
<input type="checkbox" bind:group={books} name="books" value="option 1">
<input type="checkbox" bind:group={books} name="books" value="option 2">
<input type="checkbox" bind:group={books} name="books" value="option 3">

<br />
basic Option
<br />
<input type="radio" bind:group={books} name="books" value="option 1">
<input type="radio" bind:group={books} name="books" value="option 2">
<input type="radio" bind:group={books} name="books" value="option 3">

<br />
option
<br />

<select value={selected}>
  <option value="1"></option>
  <option value="2"></option>
  <option value="3"></option>
</select> -->

<!-- <div class="background" id="background"></div>
    <div class="bg-white rounded p-10 text-center shadow-md">
      <h1 class="text-3xl">Image Password Strength</h1>
      <p class="text-sm text-gray-700">Change the password to see the effect</p>
      <div class="my-4 text-left">
        <label for="email" class="text-gray-900">Email:</label>
        <input
          type="text"
          class="border block w-full p-2 mt-2 rounded"
          id="email"
          placeholder="Enter Email"
        />
      </div>

      <div class="my-4 text-left">
        <label for="email" class="text-gray-900">Password:</label>
        <input
          type="password"
          class="border block w-full p-2 mt-2 rounded"
          id="password"
          placeholder="Enter Password"
          bind:value={password}
        />
      </div>

      <button
        class="bg-black text-white py-2 mt-4 inline-block w-full rounded"
        type="submit"
      >
        Submit
      </button>
    </div> -->